<template>
  <a-modal
    :title="title"
    width="70%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" v-bind="layout">
        <a-collapse accordion default-active-key="1" :bordered="false" v-model="activeKey">
          <a-collapse-panel :style="customStyle" key="1" header="批量导入">
            <a-upload :customRequest="UpLoad" :headers="headers">
              <a-button> <a-icon type="upload" /> 选择上传文件 </a-button>
            </a-upload>
            <a-button @click="downloadfile"><a-icon type="download" /> 下载模板 </a-button>
            <a-table
              ref="table"
              :columns="columns"
              :rowKey="(row) => row.IdNumber"
              :dataSource="data"
              :loading="loading"
              :bordered="false"
              size="middle"
            >
            </a-table>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
const columns = [
  { title: '出租方姓名', dataIndex: 'Name', width: '15%' },
  { title: '身份证号码', dataIndex: 'IdNumber', width: '15%' },
  { title: '联系方式', dataIndex: 'Phone', width: '10%' },
  { title: '银行卡号', dataIndex: 'BankAcc', width: '10%' },
  { title: '所属银行', dataIndex: 'BankName', width: '10%' },
  { title: '租金', dataIndex: 'Rental', width: '10%' },
  { title: '备注', dataIndex: 'Remark', width: '10%' },
  { title: '校验结果', dataIndex: 'result', width: '15%' },
]

import TokenCache from '@/utils/cache/TokenCache'
export default {
  props: {
    parentObj: Object,
  },
  data() {
    return {
      tempmodel: {},
      data: [],
      customStyle: 'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden',
      activeKey: ['1'], //折叠面板
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      visible: false,
      loading: false,
      entity: {},
      istrue:false,
      columns,
      title: '',
      headers: { Authorization: 'Bearer ' + TokenCache.getToken() },
      submitEntity: [],
    }
  },
  methods: {
    handleSubmit() {
      if(this.istrue){
        let config = {
        headers: { 'Content-Type': 'application/json' },
      }
      this.$http
        .post(
          '/Base_leasesystem_transactionbatch/leasesystem_transactionbatch/AddListEntity',
          JSON.stringify(this.data),
          config
        )
        .then((resJson) => {
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.data = []

            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      }else{
        this.$message.warning("请确认数据无误再提交")
      }
      
    },
    openForm(id, title) {
      this.data = []
      this.init()
    },
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    handleChange(info) {
      const status = info.file.status
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully.`)
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    UpLoad({ action, file, onSuccess, onError, onProgress }) {
      this.loading = true
      // let file1 = file
      
      let param = new FormData() //创建form对象
      param.append('file', file) //通过append向form对象添加数据
      console.log(param.get('file')) //FormData私有类对象访问不到，可以通过get判断值是否传进去
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' },
      }
      this.$http
        .post('/Base_leasesystem_transactionbatch/leasesystem_transactionbatch/ReadSettlement', param, config)
        .then((res) => {
          onSuccess(res,file)

          if (res.Success) {
            this.$message.success('导入成功')
            this.data = res.Data.Data
            this.istrue = res.Data.istrue
            this.loading = false
          } else {
            this.$message.error('导入失败，请重试')
            this.loading = false
          }
        })
    },
    downloadfile() {
      this.$http
        .post('/Base_Manage/Upload/downfile', { id: 'EQZ-Settlementtemplate.xlsx' }, { responseType: 'blob' })
        .then((res) => {
          const blob = new Blob([res])
          const fileName = '租金结算模板.xls'
          const elink = document.createElement('a') // 创建a标签
          elink.download = fileName // 为a标签添加download属性
          // a.download = fileName; //命名下载名称
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click() // 点击下载
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink) // 释放标签
        })
    },
  },
}
</script>

<style>
.ant-table-thead > tr > th
{
  font-weight: 600;
  color: #333333;
}
</style>
